<template>
	<view class="page_view">
		<image src="/static/images/home/Maskgroup@2x.png" class="common_bg"></image>
		<view class="w-1" style=" position: fixed; left: 0; top: 0; z-index: 99; overflow: hidden;">
			<view class="status_bar"></view>
			<view class="w-1 p-r-30 fr-b-c" style="height: 44px;">
				<view class="fr-s-c">
					<text class="c-00 fs-36 fm-ali">消息</text>
					<text class="weidu_num">({{total}})</text>
				</view>
				<view class="weidu_right_view">
					<image src="/static/images/home/xiangpi.png" class="weidu_right_view_img" mode=""></image>
					<text class="fs-30 c-33 fm-ali weidu_right" @tap="empty()">清除未读</text>
				</view>
			</view>
		</view>
		<!-- <view class="seach">
			<image src="/static/images/home/search_home.png" class="seach_icon" mode=""></image>
			<input type="text" class="seach_input" placeholder="搜索">
		</view> -->
		<view class="list">
			<uni-swipe-action>
				<uni-swipe-action-item  :right-options="options1" @click="del(index)"
					v-for="(item,index) in chat.list.data" :key="index">
					<view class="list-item" @tap="toChat(item.id)">
						<image :src="baseUrl.cdnurl+item.avatar" class="list-item-left" mode="" v-if="item.avatar"></image>
						<image src="/static/images/user/WechatIMG120.jpg" class="list-item-left" mode="" v-else></image>
						<view class="list-item-right">
							<view class="list-item-right-top">
								<view class="list-item-right-top-title">
									{{item.name}}
								</view>
								<view class="list-item-right-top-time">
									{{$wanlshop.timeToChat(item.time)}}
								</view>
							</view>
							<view class="list-item-right-bottom">
								<view class="">
									{{item.content}}
								</view>
								<view class="list-item-right-top-time-weidu" v-if="item.count > 0">
									{{item.count}}
								</view>
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
			<u-empty mode="message" v-if="!chat.list.data"></u-empty>
		</view>
		
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import config from '@/utils/base.js';

	export default {
		data() {
			return {
				baseUrl: config,
				options1: [{
					text: '删除',
					style: {
						backgroundColor: '#f56c6c'
					}
				}],
			}
		},
		onLoad() {
			// console.log(tim)
		},
		computed: {
			...mapState(['chat', 'statistics']),
			total(){
				let num = 0
				for(let i in this.chat.list.data){
					num += this.chat.list.data[i].count
				}
				return num
			}
		},
		mounted() {
			console.log(this.chat)
			console.log(this.statistics)
		},
		onShow() {
			this.$store.dispatch('chat/get')
		},
		methods: {
			...mapActions({
				del: 'chat/del', // 删除消息记录
				empty: 'chat/empty', // 清空角标
			}),
			go_detail() {
				uni.navigateTo({
					url: '/pages/chat/chatdetail/chatdetail'
				})
			}
		}
	}
</script>

<style scoped>
	.common_bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 284rpx;
	}

	.weidu_num {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #484D55;
		margin-left: 20rpx;
	}

	.weidu_right_view {
		display: flex;
		align-items: center;
	}

	.weidu_right {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #484D55;
	}

	.weidu_right_view_img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
	}

	.seach {
		width: 690rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		position: fixed;
		top: 180rpx;
		left: 30rpx;
		padding: 0 32rpx;
		display: flex;
		align-items: center;
	}

	.seach_icon {
		width: 28rpx;
		height: 28rpx;
	}

	.seach_input::placeholder {
		color: #9A9A9A;
	}

	.seach_input {
		width: 90%;
		margin-left: 20rpx;
		height: 100%;
		color: #333333;
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
	}

	.list {
		position: fixed;
		top: 160rpx;
		width: 100%;
		height: 80vh;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		overflow-y: auto;
		padding-bottom: 150rpx;
	}

	.list-item {
		width: 100%;
		height: 164rpx;
		display: flex;
		align-items: center;
		padding: 32rpx;
		box-sizing: border-box;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		border-bottom: 2rpx solid #F4F4F4;
	}

	.list-item-left {
		min-width: 88rpx;
		width: 88rpx;
		height: 88rpx;
		/* background-color: #333333; */
		border-radius: 50%;
	}

	.list-item-right {
		width: 100%;
		margin-left: 20rpx;
	}

	.list-item-right-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.list-item-right-top-title {
		font-size: 32rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #333333;
	}

	.list-item-right-top-time {
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #999999;
	}

	.list-item-right-bottom {
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #999999;
		margin-top: 4rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.list-item-right-top-time-weidu {
		width: 34rpx;
		height: 34rpx;
		background: #E32D1D;
		border-radius: 50%;
		text-align: center;
		line-height: 34rpx;
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #FFFFFF;
	}
</style>